import { RuleConfigCondition, RuleConfigSeverity, RulesConfig } from "@commitlint/types";
import { Button, Card, Form, Select, InputNumber, Input } from "antd";
import { RuleList } from "./rule";
import { useState } from "react";
import RuleListModal from "./RuleListModal";
import ArrayInput from "./ArrayInput";

interface RuleInfoProps {
    ruleId: string;
    ruleValue: [RuleConfigSeverity, RuleConfigCondition, unknown];
    onChange: (ruleValue: [RuleConfigSeverity, RuleConfigCondition, unknown]) => void;
}

function RuleInfo(props: RuleInfoProps) {
    return (
        <>
            {RuleList.filter(rule => rule.id == props.ruleId).map(rule => (
                <div key={rule.id}>
                    <p>{rule.descCn}</p>
                    <p>{rule.descEn}</p>
                    <Form>
                        <Form.Item label="告警级别">
                            <Select style={{ width: "100px" }} value={props.ruleValue[0]} onChange={value => {
                                let ruleValue = props.ruleValue;
                                ruleValue[0] = value;
                                props.onChange(ruleValue);
                            }}>
                                <Select.Option value={0}>关闭</Select.Option>
                                <Select.Option value={1}>警告</Select.Option>
                                <Select.Option value={2}>错误</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="触发方式">
                            <Select style={{ width: "100px" }} value={props.ruleValue[1]} onChange={value => {
                                let ruleValue = props.ruleValue;
                                ruleValue[1] = value;
                                props.onChange(ruleValue);
                            }}>
                                <Select.Option value="always">符合规则</Select.Option>
                                <Select.Option value="never">违法规则</Select.Option>
                            </Select>
                        </Form.Item>
                        {rule.defaultValue !== undefined && (
                            <Form.Item label="参数配置">
                                {(typeof rule.defaultValue) == "number" && (
                                    <InputNumber value={props.ruleValue[2] as number} controls={false} precision={0} onChange={value => {
                                        let ruleValue = props.ruleValue;
                                        ruleValue[2] = value;
                                        props.onChange(ruleValue);
                                    }} />
                                )}
                                {(typeof rule.defaultValue) == "string" && rule.optionList == undefined && (
                                    <Input style={{ width: "100px" }} value={props.ruleValue[2] as string} onChange={e => {
                                        let ruleValue = props.ruleValue;
                                        ruleValue[2] = e.target.value;
                                        props.onChange(ruleValue);
                                    }} />
                                )}
                                {(typeof rule.defaultValue) == "string" && rule.optionList != undefined && (
                                    <Select value={props.ruleValue[2] as string} style={{ width: "200px" }}
                                        onChange={value => {
                                            let ruleValue = props.ruleValue;
                                            ruleValue[2] = value;
                                            props.onChange(ruleValue);
                                        }}>
                                        {rule.optionList.map(option => (
                                            <Select.Option key={option} value={option}>{option}</Select.Option>
                                        ))}
                                    </Select>
                                )}
                                {Array.isArray(rule.defaultValue) && rule.optionList == undefined && (
                                    <ArrayInput valueList={props.ruleValue[2] as string[]} onChange={valueList => {
                                        let ruleValue = props.ruleValue;
                                        ruleValue[2] = valueList;
                                        props.onChange(ruleValue);
                                    }} />
                                )}
                                {Array.isArray(rule.defaultValue) && rule.optionList != undefined && (
                                    <Select value={props.ruleValue[2] as string[]} mode="multiple" onChange={valueList => {
                                        let ruleValue = props.ruleValue;
                                        ruleValue[2] = valueList;
                                        props.onChange(ruleValue);
                                    }}>
                                        {rule.optionList.map(option => (
                                            <Select.Option key={option} value={option}>{option}</Select.Option>
                                        ))}
                                    </Select>
                                )}
                            </Form.Item>
                        )}
                    </Form>
                </div>
            ))}
        </>
    );
}

interface RulePanelProps {
    rules: Partial<RulesConfig>;
    onChange: (rules: Partial<RulesConfig>) => void;
}

export default function RulePanel(props: RulePanelProps) {
    const [showModal, setShowModal] = useState(false);

    return (
        <Card bordered={false} extra={
            <Button onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setShowModal(true);
            }}>增加规则</Button>
        }>
            {Object.keys(props.rules).filter(ruleKey => !(["type-enum", "type-case"].includes(ruleKey))).map(ruleKey => (
                <Card key={ruleKey} title={ruleKey} style={{ marginBottom: "10px" }} extra={
                    <Button type="link" danger onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        let rules = props.rules;
                        delete rules[ruleKey];
                        props.onChange(rules);
                    }}>删除规则</Button>
                }>
                    <RuleInfo ruleId={ruleKey} ruleValue={props.rules[ruleKey] as [RuleConfigSeverity, RuleConfigCondition, unknown]} onChange={ruleValue => {
                        let rules = props.rules;
                        rules[ruleKey] = ruleValue;
                        props.onChange(rules);
                    }} />
                </Card>
            ))}
            {showModal == true && (
                <RuleListModal rules={props.rules} onCancel={() => setShowModal(false)}
                    onAdd={(ruleId, ruleValue) => {
                        let rules = props.rules;
                        rules[ruleId] = ruleValue;
                        setShowModal(false);
                        props.onChange(rules);
                    }} />
            )}
        </Card>
    );
}